<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})

import {io} from "socket.io-client";

const client = "http://localhost:17521"
const printerName = 'Win32 Printer : Bar Code Printer T-4503E'
const pdfPath = 'http://localhost:8080/down'
const socket = io(client, {
  transports: ["websocket"],
  auth: {
    token: "tk-hiprint-token", // 在此处填入你 client 设置的 token，缺省可留空
  }

})

socket.on("connect", () => {
  globalThis.connect = true;
  //  Do something for your project
  console.log('connect success')

})

socket.on("clientInfo", (clientInfo) => {
  globalThis.clientInfo = clientInfo;
  console.log('clientInfo')
  console.log(clientInfo)

});

socket.on("printerList", (printerList) => {
  globalThis.printerList = printerList;
  console.log('printerList')
  console.log(printerList)

})
// 打印成功回调
socket.on("success", (res) => {
  console.log('success')
  console.log(res)
  // : Do something for your project

})

// 打印失败回调
socket.on("error", (res) => {
  console.log('error')
  console.log(res)
  // : Do something for your project

})

// 断开链接回调
socket.on("disconnect", () => {
  globalThis.connect = false;
  // : Do something for your project
  console.log('disconnect')
})

function printPdf() {
  // 非vue-plugin-hiprint
  console.log('printPdf')
  // 静默打印
  socket.emit("news", {
    printer: printerName, // 打印机名称
    pages: 1,
    scale: 'fit', // 缩放 noscale、shrink、fit
    type: 'url_pdf',
    monochrome: 'true', // 黑白打印
    pdf_path: pdfPath,
    pageSize: {height: 80 * 1000, width: 61 * 1000},
    orientation: 'portrait', // 纸张方向 portrait、landscape
    printDialog: false, // 显示打印对话框 true、false: false 为静默打印
    copies: 1 // 打印份数
  })
}

</script>

<template>
  <h1>hello-world</h1>
  <button @click="printPdf">打印Pdf</button>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
